<template>
	<view class="user">
		<!-- 骨架屏 -->
		<view class="skeleton" v-show="skeleton">
			<u-skeleton :loading="true" avatar rows="3" avatarSize="48"></u-skeleton>
		</view>
		
		<!-- 用于包裹除骨架屏以外的东西 -->
		<view v-show="!skeleton">
			<view class="top">
				<view class="group" @click="toUserInfo">
					<view class="userinfo">
						<view class="pic">
							<image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" 
							:src="userimgUrl" 
							mode="aspectFill"></image>
							<image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image>
						</view>
						<view class="text" v-if="hasLogin">
							<view class="nickname">{{userData[0].nickname||userData[0].username||userInfo.mobile}}</view>
							
							<view class="year">
								
							</view>
						</view>
						<view class="text" v-else>
							<view class="nickname">点击登录</view>
						</view>
						
					</view>
					
					<view class="more">
						<u-icon name="arrow-right" color="#F9F9F9" size="28"></u-icon>
						<!-- <text class="iconfont icon-a-10-you"></text> -->
					</view>
				</view>
				
				<view class="bg">				
					<image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url"
					:src="userimgUrl" 
					mode="aspectFill"></image>
					<image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image>
				</view>
			</view>
			
			
			
			<view class="main">
				<view class="info">
					<view class="item"><text>刷题量</text>{{brushCount ? `${brushCount}`:'0'}}</view>
					<view class="item"><text>正确率</text>{{accuracyRate ? `${accuracyRate}`:"0"}}%</view>
					<!-- <view class="item"><text>排名</text>正在开发中</view> -->
				</view>
				<!-- 历史记录 我的错题 我的收藏 -->
				<view class="list">
					<view class="group">					
						<view class="item" @click="goHistoryDetial">
							<view class="left"><text class="iconfont icon-a-24-bianji"></text><text class="text">历史记录</text></view>
							<view class="right">
								<u-icon name="arrow-right" size="18"></u-icon>
							</view>
						</view>
						
					</view>
					<!-- 关于 意见反馈 -->
					<view class="group">
						<view class="item"@click="about">
							<view class="left"><text class="iconfont icon-a-32-wenjian" ></text><text class="text">关于</text></view>
							<view class="right"><text class="iconfont icon-a-10-you"></text></view>
						</view>		
						<view class="item" @click="goFeedback">
							<view class="left"><text class="iconfont icon-a-5-xinxi"></text><text class="text">意见反馈</text></view>
							<view class="right"><text class="iconfont icon-a-10-you"></text></view>
						</view>
						<view class="item" @click="goFeedbackList" v-if="uniIDHasRole('wxadmin')||uniIDHasRole('entryClerk')">
							<view class="left"><text class="iconfont icon-a-5-xinxi"></text><text class="text">查看意见反馈</text></view>
							<view class="right"><text class="iconfont icon-a-10-you"></text></view>
						</view>
						<!-- 管理员才可见 -->
						<view class="item" @click="goAddQuestion" v-if="uniIDHasRole('wxadmin')||uniIDHasRole('entryClerk')">
							<view class="left"><text class="iconfont icon-a-5-xinxi"></text><text class="text">题目添加</text></view>
							<view class="right"><text class="iconfont icon-a-10-you"></text></view>
						</view>	
					</view>

					<!-- 退出登录 -->
					<view class="group">
						<view class="item" @click="logout">
							<view class="left"><text class="iconfont icon-a-73-tuichu"></text><text class="text">退出登录</text></view>
							<view class="right"><text class="iconfont icon-a-10-you"></text></view>
						</view>					
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	const db=uniCloud.database();
	const userInfo = uniCloud.importObject("userInfo", {
		customUI: true // 取消自动展示的交互提示界面
	}) ;//导入用户信息的云对象
	export default {
		data() {
			return {
				userimgUrl:"",//用于保存用户头像
				userData:[],//保存用户信息
				accuracyRate:0,//保存用户的正确率
				skeleton:true,//数据加载完毕后取消骨架屏
				brushCount:0,//保存用户的刷题数量
				// totalObj:{
				// 	artNum:0,
				// 	likeNum:0
				// }
			};
		},
		onShow() {
			// console.log("111");
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage.data.backRefresh) {
				currentPage.data.backRefresh = false;
				this.getUserInfo();
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
			}
		},
		onLoad(){
			this.getUserInfo();
		},
		computed:{
			userInfo() {
				//平衡因云服务商不同导致的用户头像url差别
				if(!store.userInfo.avatar_file){
					console.log("store.userInfo",store.userInfo);
					return store.userInfo;
					
				}else{
					let url = "https://7463-tcb-jt4xhf2yawry64k-6chab0059a75-1316606514.tcb.qcloud.la/";
					store.userInfo.avatar_file.url = url + store.userInfo.avatar_file.name;
					this.userimgUrl = store.userInfo.avatar_file.url;
					console.log("store.userInfo",store.userInfo);
					return store.userInfo
				}
				// let url = "https://7463-tcb-jt4xhf2yawry64k-6chab0059a75-1316606514.tcb.qcloud.la/";
				// store.userInfo.avatar_file.url = url + store.userInfo.avatar_file.name;
				// this.userimgUrl = store.userInfo.avatar_file.url;
				// console.log(store.userInfo);
				// return store.userInfo
			},
			hasLogin(){
				return store.hasLogin
			}
			
		},
		methods:{
			
			//获取用户信息
			async getUserInfo(){
				if(!this.hasLogin) return;
				try{
					const userData = await userInfo.getUserData(store.userInfo._id);
					this.userData =userData.data;
					console.log("userData",this.userData[0].nickname);
					this.getUserBrushes().then(res=>{
						this.skeleton = false;
					})
					
				}catch(e){
					uni.showToast({
						title:"获取用户数据出错了！",
						icon:'error'
					})
				}
			},
			//读取本地缓存中的刷题数、刷题正确率
			async getUserBrushes(){
				try{
					this.brushCount= uni.getStorageSync('brushCount');
					this.accuracyRate =uni.getStorageSync('accuracyRate');
				}catch(e){
					console.log("缓存获取失败");
				}
			},
			
						
			//编辑个人资料
			toUserInfo(){
				if(this.hasLogin){
					uni.navigateTo({
						url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
					})	
				}else{
					let route = this.$mp.page.route;
					uni.navigateTo({
						url: '/uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl=/'+route
					})
				}
			},
			
			//退出登录
			logout(){
				if(this.goLoginPage()) return;			
				uni.showModal({
					title:"是否确认退出?",
					success:res=>{
						console.log(res);
						if(res.confirm){
							mutations.logout()
						}
					}
				})
							
			},
			
			// 判断是否登录
			goLoginPage(){
				if(!this.hasLogin){
					uni.showToast({
						title:"未登录",
						icon:"none"
					})	
					return true;
				}
				return false
			},
			//历史记录详情页
			goHistoryDetial(){
				uni.navigateTo({
					url:"/pages/history/history"
				})
			},
			//跳转到意见反馈
			goFeedback(){
				uni.navigateTo({
					url:"/uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback"
				})
			},
			//跳转查看意见反馈
			goFeedbackList(){
				uni.navigateTo({
					url:"/uni_modules/uni-feedback/pages/opendb-feedback/list"
				})
				
			},
			//跳转到添加题目
			goAddQuestion(){
				uni.navigateTo({
					url:"/pages/addQuestion/addQuestion"
				})
			},
			//点击关于
			about(){
				uni.navigateTo({
					url:"/pages/linkMe/linkMe"
				})
			}
		}
	}
</script>

<style lang="scss">
.user{
	
	.top{
		height: 300rpx;
		background: #bbb;
		padding:0 30rpx;
		padding-top:var(--status-bar-height);
		position: relative;
		display: flex;
		align-items: center;
		.group{
			position: relative;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			color:#fff;
			.userinfo{
				display: flex;
				width: 100%;				
				align-items: center;				
				.pic{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					border:2px solid #fff;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.text{
					padding-left:20rpx;
					.nickname{
						font-size: 44rpx;
						font-weight: 600;
					}
					.year{
						font-size: 26rpx;
						opacity: 0.6;
						padding-top:5rpx;
					}
				}
			}
			.more{
				.iconfont{
					font-size: 40rpx;
				}
			}
			
		}
		.bg{
			position: absolute;
			top: 0;
			left:0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				filter: blur(20px);
				transform: scale(2);
				opacity: 0.5;
			}
		}
	}
	.main{
		width: 100%;
		min-height: 200rpx;
		background: #fff;
		border-radius: 30rpx;
		transform:translateY(-30rpx);
		padding:30rpx 0;
		.info{
			padding:10rpx 30rpx;
			display: flex;
			font-size: 30rpx;
			.item{
				padding-right: 20rpx;
				color:#888;
				text{
					font-weight: 600;
					color:#333;
				}
			}
		}
		.list{
			.group{
				padding:15rpx 30rpx;
				border-bottom:15rpx solid #f4f4f4;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding:25rpx 0;
					font-size: 36rpx;
					color:#555;
					border-bottom:1rpx solid #f8f8f8;
					.left{
						display: flex;
						align-items: center;
						.iconfont{
							font-size: 38rpx;
							margin-right: 10rpx;
						}
					}
					.right{
						.iconfont{
							font-size: 26rpx;
						}
					}
				}
				.item:last-child{
					border: none;
				}
			}
			.group:last-child{
				border:none;
			}
		}
	}
	
	.skeleton{
		padding: 150rpx 24rpx ;
	}
	
}
</style>